<template>
  <div class="sqing">
<!--      <div id="topt">-->
<!--      <div class="top">-->
<!--        <img src="../assets/img/sqimg/fanhui.png" alt="" @click="back">-->
<!--        <div class="title-img">家庭住房信息</div>-->
<!--        <span>暂存</span>-->
<!--      </div>-->
          <NavBarTop pageTit="家庭住房信息" :needPhoneTop="false" :needZanC="true"></NavBarTop>
<!--    </div>-->
<div id="banner">
<van-form class="formimg" v-for="(item,index) in jtcy" :key="index">
  <!-- 家庭成员 -->
<van-field
  v-model="item.name"
  :label="'家庭成员'+(index+1)"
  placeholder="请输入成员名"
  input-align="right"
/>
<!-- <van-field
  v-model="item.fieldValuezj"
  label="家庭住房状况"
  placeholder="请选用房屋住用状况"
  input-align="right"
  readonly
  is-link
  required
  @click="showzj=true"
/>
<van-popup v-model="showzj" round position="bottom">
  <van-cascader
    v-model="item.fieldValuezj"
    title="请选用房屋住用状况"
    :options="optionszj"
    @close="showzj = false"
    @finish="onFinishzj"
  />
</van-popup> -->
<!-- <img src="../assets/img/sqimg/xiala.png" alt=""> -->
<van-field

  readonly
  clickable
  label="家庭住房状况"
  is-link
  :value="item.fieldValuezj"
  input-align="right"
  placeholder="请选择住房状况"
  @click="showp(index)"
/>


</van-form>
<!-- 选择器 -->

<van-popup v-model="showPicker" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>

<div class="btn3" @click="addPeople">
    <img src="../assets/img/sqimg/jia1.png" alt="">
    <span class="btn3-text">添加家庭成员信息</span>
</div>
<div style="margin: 16px;" class="divbtn">
    <van-button round block type="info"  @click="onsubmit" >下一步</van-button>
  </div>


</div>

  </div>
</template>

<script>
import { Button, Cell, CellGroup, Icon, Image as VanImage, NavBar,Form ,Field,Cascader ,Popup,picker,Toast  } from "vant";
import  NavBarTop from '@/components/navBar.vue'
export default {
    name: "sqing",
  components: {
      NavBarTop,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [VanImage.name]: VanImage,
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Cascader.name]: Cascader,
    [Popup.name]: Popup,
    [picker.name]: picker,
    [Toast.name]: Toast,
  },
  data() {
    return {

            // jtcy:['王自健','王平'],
       jtcy:[
       ],
        // 请选用房屋住用状况
        showzj:false,
        cascaderValuezj:'',
        fieldValuezj:'',
        // optionszj:{
        //     zfzk:['住用','未住用']
        // }
        // optionszj:[
        //     {text:'住用',value: '32000',},
        //     {text:'未住用',value: '33000',}
        // ],
        index:'',
        value: '',
        showpack:'',
      showPicker: false,
      columns: ['自有产权', '租住或借住','农民住房','商品住房（含已购公房）','集体宿舍','其他'],
    };
  },
methods:{
    onsubmit() {
      // console.log('submit', values);
    this.$router.push('/shenQ5')
    },
    // 请选用房屋住用状况
    //  onFinishzj({ selectedOptions }) {
    //   this.showzj = false;
    //   this.fieldValuezj = selectedOptions.map((option) => option.text).join('/');
    // },
    back(){
        this.$router.go(-1)
    },
    addPeople(){
      let obj={
        name:'',
        zhuf:'',
        fieldValuezj:''
      }
      this.jtcy.push(obj)
    },
    onConfirm(value) {
      this.jtcy[this.showpack].fieldValuezj = value;
      this.showPicker = false;
    },
    //  onChange(picker, value, index) {
    //   Toast(`当前值：${value}, 当前索引：${index}`);
    //   console.log(picker)
    // },
    showp(index){
      this.showPicker = true
      // console.log(index)
      this.showpack=index
    }
}

}
</script>

<style scoped>
.border1{
  width: 100%;
  height: .06rem;
  background: #F2F3F5;
  border: none;
}
::v-deep .van-field__control--right{
  color: #666666;
}
.btn3{
width: 3.45rem;
height: .51rem;
border: .01rem solid #2B8FF3;
opacity: 1;
border-radius: .28rem !important;
font-size: .15rem;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: .15rem;
}
.btn3 img{
    width: .22rem;
    height: .22rem;
}
.btn3 .btn3-text{
    margin-left: .25rem;
}
.formimg img{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: 0 auto;
padding: .2rem 0;
}
.divbtn{
  width: 3.45rem;
  /* position: absolute; */
  bottom: 10px;
}
#topt{
  background: url('../assets/img/sqimg/xhg.png') no-repeat;

}
.top img{
  width: .08rem;
  height: .14rem;
padding-left: 20px;
  /* float: left; */
}
.title-img{
  /* height: 25px; */
font-size: .17rem;
font-family: Source Han Sans SC;
font-weight: bold;
line-height: 0px;
display: inline;
padding-left: 100px;
color: #2D2D2D;
opacity: 1;
}
.top span{
    font-size: .15rem;
    font-weight: bold;
color: #2D2D2D;
    margin-left: 1rem;
}
</style>
